

.main-view {
  -wibkid-transition: -webkit-transform 0.5s;
  -webkit-transform-origin: 0 0; 
}
.record-vioce-btn button{
    width: 10rem;
    height: 3rem;
    background-color: rgba(0, 128, 0, 0);
    border-radius: 5px;
    color: #fff;
    display: inline-block
}

.record-vioce-btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    width: 100%;
    bottom: 7.5rem;
}

.record-vioce-btn img{
    width: 12rem;
}

.record-vioce-btn > div{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 3rem;
}
.record-vioce-btn p{
    margin-top: 5rem;
    font-size: 1rem;
    color: rgb(254,154,87);
}

#talkBtn{
    background-image: url(../img/ios/record_vioce.png);
    background-size: 100%;
}

#dot{
    background-image: url(../img/dot.png);
    background-size: 100%;
    width: 10rem;
    height: 3rem;
    background-color: rgba(0, 128, 0, 0);
    border-radius: 5px;
    color: #fff;
    display: inline-block
}

#shareBtn{
    background-image: url(../img/meToo.png);
    background-size: 100%;
}

#draw-lottery{
    background-image: url(../img/ios/draw_lottery.png);
    background-size: 100%;
    display: none;
}

.main-view{
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../img/main_bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.gifts-box{
    overflow: hidden;
    position: absolute;
    top: 20%;
    height: 38rem;
    width: 100%;
}

.gifts-box img{
    z-index: 10;
    position: absolute;
    transition:All 0.8s ease-in-out;
    -webkit-transition:All 0.8s ease-in-out;
    -moz-transition:All 0.8s ease-in-out;
    -o-transition:All 0.8s ease-in-out;
}

.gifts-box div,#tree-animation-box div,#bubble-box img{
    position: absolute;
}

#tree-animation-box,#bubble-box{
    width: 100%;
    height: 100%;
}

.tree-user-vioce{
    width: 4.5rem;
    height: 4.5rem;
    background-image: url('../img/ios/bubble.png');
    border-radius: 5rem;
    background-size: 100%;
}

.tree-user-vioce .user-head,.tree-user-vioce .current-user-head{
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 5rem;
}

.tree-user-vioce .play,.tree-user-vioce .stop,#current-user,#current-user-stop{
    position: absolute;
    z-index: 20;
    opacity: 0.8;
    width: 1.3rem;
    height: 1.5rem;
}
/*
.tree-gifts:hover{
    transform:rotate(360deg) scale(1.5);
    -webkit-transform:rotate(360deg) scale(1.5);
    -moz-transform:rotate(360deg) scale(1.5);
    -o-transform:rotate(360deg) scale(1.5);
    -ms-transform:rotate(360deg) scale(1.5);
}*/

#tree-animation{
    position: absolute;
    top:50%;
    left: 50%;
    width: 5rem;
    height: 5rem;
    background-image: url('../img/gift1.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.loop-box{
    width: 300%;
    position: absolute;
    bottom: 1rem!important;
    height: 3rem;
}

.loop-box > div{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack:space-around;
    -ms-flex-pack:space-around;
    justify-content:space-around; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 10rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    background-color: rgba(0, 0, 0, 0.15);
    margin-right: 5rem;
}

.loop-box > div > img{
   width: 1.5rem;
   height: 1rem;
}
.loop-box > div >span{
   font-size: 1rem;
   color: rgb(255, 254, 254);
}


.between{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:space-between;
    -ms-flex-pack:space-between;
    justify-content:space-between; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


.center{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.space-between{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.buttom-affrim-box{
    background-color: #fff;
    z-index: 30;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-around;
    -webkit-box-align: space-around;
    -ms-flex-align: center;
    align-items: center;
}
.buttom-affrim-box img{
    width: 5rem
}

.modal-box,#errorScreen{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../img/modal.png');
    z-index: 30;
    background-size: 100% 100%;
}
#errorScreen{
    z-index: 1000!important;
}

#errorScreen p{
    position: absolute;
    font-size: 1.5rem;
    top: 47%;
    left: 35%;
}

.modal-box .modal-share-box{
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 37%;
    right: 5rem;
    z-index: 110;
    /*background-color: red;*/
}

.modal-content{
    flex-direction: column;
    font-size: 1.8rem;
    color: rgb(112,112,112);
}

.modal-content p{
    margin-top: 1rem;
}

.nothing{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 20;
}
.head-bubble{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.head-bubble .line{
    width: 0;
    background-color: #fff
}
 
.head-bubble .share{
    // width: 4rem;
    // height: 4rem;
    z-index: 20;
}
.head-bubble .my-gift{
    z-index: 21
}

.voice-gif,.cover-hint{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.cover-hint{
    background-color: rgba(0,0,0,0.5);
    z-index: 110;
}

.voice-gif img{
    width: 10rem;
}

.cover-hint img{
    position: absolute;
    right: 0;
    top: 0;
    width: 10rem;
}

.h40{
    height: 2rem;
}
.h140{
    height: 7rem;
}

.share-box,.my-gift-box{
    position: absolute;
    -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;;
}

.share-box img{
    width: 10rem;
}
.my-gift-box img{
    width: 10rem;
}

.rule{
    width: 4rem;
    height: 2rem;
    background-image: url(../img/ios/rule.png);
    background-size: 100% 100%;
    position: absolute; 
    top: 10rem;
    right: 0;
    z-index: 110;
}


.my-gift-page,.rule-page{
    color: #fff;
    overflow: auto;
    z-index: 120;
    padding: 1.5rem;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/ios/mygift_bg.png);
}
.my-gift-page .head img,.rule-page .head img{
    width: 1rem;
}

.my-gift-page #myGifts{
    flex-wrap:wrap;
    overflow: auto;
    width: 100%;
    height: 25rem;
    background-image: url(../img/ios/gift_box.png);
    background-size: 100% 100%;
    padding: 1.5rem;
    margin-top: 1.5rem;
    color: rgb(49,49,49);
    font-size: 1.8rem;
}
.my-gift-page #myGifts div {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.myGifts-btn{
    margin-top: 1.5rem
}

.my-gift-page .state{
    margin-top: 1rem;
}




























